<template>
    <div class="id">
        <div class="username">
            <div><label for="username">用户名</label> </div>
            
            <el-input id="username" v-model="username" placeholder="请输入内容"></el-input>
        </div>

        <div class="password">

            <label for="password">密码</label>
            <el-input placeholder="请输入密码" v-model="password" show-password></el-input>
        </div>
        <el-button type="primary" @click="login">登录</el-button>{{ msg }}

    </div>


</template>

<script>
export default {
    data() {
        return {
            username: "",
            password: "",
            msg:""
        }
    },
    methods:{
        login(){
            console.log(this.username);
            console.log(this.password);
            this.axios.get("/login",{
                params:{
                    username:this.username,
                    password:this.password
                }
            }).then(res =>{
                // 记录登陆状态 全局：vuex，sessionStorage，localStorage
                if (res.data.code==200) {
                    // 记录登陆状态 全局：vuex，sessionStorage，localStorage
                    sessionStorage.setItem("uid","3");
                    sessionStorage.setItem("username",this.username);
                    this.$router.replace("/index");
                }else{
                    this.msg="登陆失败"
                }
                console.log(res);

                
            })
            
        }
        

    }
}

</script>

<style scoped>
.username{
    display: flex;
    width: 30%;
    margin: auto;
    text-align: left;
}
.password{
    display: flex;
    width: 30%;
    margin: auto;
    text-align: left;
}

</style>
